/*
 * @Description: 特殊产品发货规则页面
 * @Version: 1.0
 * @Autor: c-jack.qian
 * @Date: 2020-10-21 17:30:52
 * @LastEditors: c-jack.qian
 * @LastEditTime: 2021-04-25 16:46:14
 */
import React, { useMemo, useRef } from 'react';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import {
  Button,
  DataSet,
  Form,
  Lov,
  Modal,
  notification,
  Select,
  SelectBox,
  Table,
  TextField,
} from 'choerodon-ui/pro';
import { ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
import { useDataSet } from 'hzero-front/lib/utils/hooks';
import { DataSetProps } from 'choerodon-ui/pro/lib/data-set/DataSet';
import { connect } from 'dva';
import { TableColumnTooltip } from 'choerodon-ui/pro/lib/table/enum';
import intl from 'utils/intl';

import {
  specialProductDeliveryRulesDS,
  addSpecialProductDeliveryRulesDS,
} from '../../stores/specialProductDeliveryRulesDS';
import { renderSort, addEnterCallBack } from '../../utils/utilsFun';
import CustomizeTableSearch from '@common/components/CustomizeTableSearch';
import formatterCollections from 'utils/intl/formatterCollections';

notification.config({
  duration: 3,
  placement: 'bottomRight',
});
interface propstype {
  dispatch: any;
}

const ClassPage: React.FC<propstype> = () => {
  const tableDS = useDataSet(() => new DataSet(specialProductDeliveryRulesDS() as DataSetProps));
  const addFormDS = useDataSet(
    () => new DataSet(addSpecialProductDeliveryRulesDS() as DataSetProps)
  );

  const pageRef = useRef(null);

  // 添加按回车查询事件
  addEnterCallBack(tableDS, pageRef);

  // 删除选择行
  const handleDelete = () => {
    const seletedRecord = tableDS.selected;
    if (seletedRecord.length === 0) {
      notification.warning({
        placement: 'bottomRight',
        message: intl.get(`dji.otc.om.view.reminder.warning`).d('提示'),
        description: intl.get(`dji.otc.om.view.reminder.selectDeleteData`).d('请勾选删除的数据'),
      });
      return;
    }
    tableDS.delete(seletedRecord);
  };

  const Columns = useMemo<any>(
    () => [
      {
        header: intl.get(`dji.otc.om.view.field.serialNumber`).d('序号'),
        width: 50,
        lock: true,
        renderer: ({ record }) => renderSort(record, tableDS),
      },
      { name: 'shippingRule', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'businessGroupMeaning', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'warehouseName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'productCode', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'productName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'isLocalWarehouse', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'createdUserName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'creationDate', align: 'left', tooltip: TableColumnTooltip.always },
    ],
    []
  );

  const handleCreate = () => {
    checkDetailModal();
  };


  const checkDetailModal = () => {
    addFormDS.create({})
    Modal.open({
      key: 'modal',
      title: intl.get(`dji.otc.om.view.title.createSpecialProductDeliveryRules`).d('新建特殊产品发货规则'),
      closable: true,
      drawer: true,
      children: (
        <div>
          <Form dataSet={addFormDS} columns={1}>
            <Select name="businessGroup" />
            <Select name="shippingRule" />
            <Select name="warehouseObj" />
            <Lov name="productCodeObj" />
            <TextField name="productName"  disabled/>
            <SelectBox name="isLocalWarehouse" />
          </Form>
        </div>
      ),
      onCancel: () => addFormDS.reset(),
      onOk: () => addFormDS.submit().then(() => tableDS.query()),
    });
  };


  return (
    <PageHeaderWrapper
      title={intl.get('dji.otc.om.view.menu.specialProductDeliveryRules').d('特殊产品发货规则')}
      header={
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Button onClick={() => handleDelete()}>
            {intl.get(`dji.otc.om.view.button.delete`).d('删除')}
          </Button>
          <Button onClick={() => handleCreate()} color={ButtonColor.primary}>
            {intl.get(`dji.otc.om.view.button.create`).d('新建')}
          </Button>
        </div>
      }
    >
      <div ref={pageRef}>
        <Table
          dataSet={tableDS}
          border
          queryFieldsLimit={3}
          columns={Columns}
          queryBar={props => (
            <CustomizeTableSearch
              elements={[
                <Select name="businessGroupCode" key="businessGroupCode" searchable />,
                <Select name="warehouseCode" key="warehouseCode" searchable />,
                <TextField name="productName" key="productName" />,
              ]}
              // eslint-disable-next-line react/jsx-props-no-spreading
              {...props}
            />
          )}
        />
      </div>
    </PageHeaderWrapper>
  );
};
export default connect()(
  formatterCollections({
    code: 'dji.otc.om',
  })(ClassPage)
);
